<template>
    <div>
        <div v-show="!bindTempDetailDialog">
            <el-radio v-model="radio" :label="1" class="radioStyle">房间标准</el-radio>
            <el-form inline v-model="formSearch" size="small" label-width="68px"
                style="margin:20px 6px 0px;padding-left:20px">
                <!-- <el-form-item label="组织架构">
                    <el-cascader ref="cascader" v-model="option1" :options="orgTree" :props="defaultProps2"
                        @change="handleChange" clearable>
                    </el-cascader>
                </el-form-item> -->
                <el-form-item label="选择项目">
                    <el-select v-model="formSearch.xqId" @change="checkHouse" placeholder="请选择项目">
                        <el-option v-for="item in xqOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域名称" size="small">
                    <!-- <el-input v-model="formSearch.sectionName"></el-input> -->
                    <el-select v-model="formSearch.sectionName" clearable placeholder="请选择区域">
                        <el-option v-for="(item, index) in sectionList" :label="item" :value="item" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间名称" size="small">
                    <el-input v-model="formSearch.houseName" placeholder="请输入房间名称"></el-input>
                </el-form-item>
                <el-form-item label="房间类型" size="small">
                    <el-select v-model="formSearch.type" placeholder="请选择房间类型">
                        <!-- 1物业中心|2业主房间 -->
                        <el-option :value="1" label="物业中心"></el-option>
                        <el-option :value="2" label="业主房间"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getlist">查询</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="btn">
                <span class="queryResult">查询结果</span>
                <el-button size="mini" type="primary" class="el-icon-plus"
                    @click="$router.push('/addChargeStandardTemp')"> 新增</el-button>
                <!-- <el-button size="mini" type="success">导入</el-button>
                <el-button size="mini" type="warning">导出</el-button> -->
                <el-button size="mini" type="info" @click="$router.push('/exist_temp_manage')">管理已有标准模板</el-button>
            </div>
            <el-table :data="tableData">
                <el-table-column label="项目名称" prop="xqName"></el-table-column>
                <el-table-column label="区域名称" prop="sectionName"></el-table-column>
                <el-table-column label="房间名称" prop="houseName"></el-table-column>
                <el-table-column label="房间号" prop="houseNum"></el-table-column>
                <el-table-column label="收费项" prop="costItemName"></el-table-column>
                <el-table-column label="收费标准名称" prop="costItemStandardName"></el-table-column>
                <el-table-column label="房间类型" prop="nature">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.nature==1?'常住房':scope.row.nature==2?'租赁房':'/'}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="">
                    <template slot-scope="scope">
                        <div>
                            <!-- <el-button size="small" type="warning">修改</el-button>
                        <el-button size="small" type="danger">删除</el-button> -->
                            <el-button @click="bindTempDetailView(scope.row)" size="small" type="info">详情
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formSearch.current" :page-sizes="[10, 20, 50, 100]" :page-size="formSearch.size"
            layout="total, sizes, prev, pager, next, jumper" :total="total" class="paging">
        </el-pagination> -->
            <paging @changePage="handleCurrentPage" :get-total='total'></paging>
        </div>
        <!-- 新增 | 修改 -->
        <el-dialog title="新增" :visible.sync="dialogVisible" width="50%">

            <el-form :model="dialogForm" label-suffix="：" class="dialogForm">
                <el-form-item label="收费项">
                    管理费-物业管理费(住宅物业管理费)
                </el-form-item>

                <el-form-item label="计算方式">
                    <el-radio :label="1" v-model="dialogForm.calculationMethod">面积</el-radio>
                    <el-radio :label="2" v-model="dialogForm.calculationMethod">仪表读数</el-radio>
                    <el-radio :label="3" v-model="dialogForm.calculationMethod">单位单价</el-radio>
                    <el-radio :label="4" v-model="dialogForm.calculationMethod">固定金额</el-radio>
                </el-form-item>
                <el-form-item label="缴费类型">
                    <el-radio :label="1" v-model="dialogForm.calculationCycle">周期缴费</el-radio>
                    <el-radio :label="2" v-model="dialogForm.calculationCycle">单次缴费</el-radio>
                </el-form-item>

                <el-form-item label="单价">
                    <el-input class="input100" size="mini" v-model="dialogForm.unitPrice"></el-input>
                    <span> 元/m²&nbsp;&nbsp;&nbsp;&nbsp;每</span>
                    <el-select class="input100" size="mini" v-model="dialogForm.unit" placeholder="请选择">
                        <el-option label="月" :value="dialogForm"></el-option>
                        <el-option label="日" :value="dialogForm"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- :tableData="bingDetailList" -->
        <bindTempDetail v-if="bindTempDetailDialog" @delSuccess="delSuccess" :houseId="houseId" ref="bindTempDetail"/>
    </div>
</template>

<script>
import paging from '../paging.vue';
import bindTempDetail from './houseBindTempDetail.vue';
import {
    xqSelectList,
    orgTree,
    sectionList,
    houseBindDetail,
    houseBindList,
} from '../../url/api';
export default {
    data() {
        return {
            // bingDetailList:[],
            bindTempDetailDialog: false,
            dialogForm: {
                calculationMethod: 1,
                calculationCycle: 1,
            },
            dialogVisible: false,
            radio: 1,
            tableData: [],
            option1: [],
            orgTree: [],
            formSearch: {
                current:1,
                size:10
            },
            defaultProps2: {
                children: 'children',
                label: 'name',
                value: 'id',
                expandTrigger: 'hover',
                checkStrictly: true,
            },
            total: 0,
            sectionList: [],
            xqOptions: [],
            houseId:''
        };
    },
    methods: {
        handleCurrentPage(val) {
          this.formSearch.current = val
          this.getlist();
        },
        delSuccess(val){
            //console.log(val);
            if(val){
                this.getlist();
            }else{
                this.$message({
                    type:"error",
                    message:'删除失败！'
                })
            }
                this.bindTempDetailDialog=false
                //console.log(this.bindTempDetailDialog);
        },
        // A座店面
        bindTempDetailView(obj) {
            this.houseId = obj.houseId;
            if(!obj.chargeStandards.length){
                this.$message("该房间没有配置")
                return;
            }
            this.bindTempDetailDialog = true;
            // houseBindDetail(houseId).then((res) => {
            //     if(res.data.code == 200){
            //         //console.log(res.data.data);
            //         // this.bingDetailList = res.data.data;
            //         this.bindTempDetailDialog = true;
            //     }
            // });
        },
        resetForm() {
            //重置查询条件
            this.formSearch = {
                current: 1,
                size: 10,
                xqId: this.xqOptions[0].id,
            };
        },
        handleChange(value) {
            if (value.length != 0) {
                this.formSearch.orgId =
                    this.$refs.cascader.getCheckedNodes()[0].data.id;
            } else {
                this.formSearch.orgId = '';
            }
        },
        checkHouse(val) {
            this.formSearch.sectionName = '';
            //this.formSearch.houseName = '';
            //this.getHouseList(val)
            this.getSectionList(val);
        },
        getSectionList(id) {
            this.sectionList = [];
            sectionList({ size: 9999, current: 1, xqId: id, pid: 0 }).then(
                (res) => {
                    res.data.data.records
                        .filter((item) => item.name != '')
                        .forEach((item) => {
                            this.sectionList.push(item.name);
                        });
                    //console.log(this.sectionList);
                }
            );
        },
        getInit() {
            let org_tree = {
                name: '',
                status: 1,
            };
            orgTree(org_tree).then((res) => {
                //console.log(res);
                if (res.data.code == 200) {
                    this.orgTree = res.data.data;
                }
            });

            xqSelectList(this.formSearch).then((res) => {
                //console.log(res);
                if (res.data.code == 200) {
                    this.xqOptions = res.data.data;
                    this.formSearch.xqId = this.xqOptions[0].id;
                    this.getSectionList(this.formSearch.xqId);
                    this.getlist();
                } else {
                    this.$message(res.data.msg);
                }
            });
        },
        getlist() {
            houseBindList(this.formSearch).then((res) => {
                if (res.data.code == 200) {
                    //console.log(res.data.data.records);
                    this.tableData = res.data.data.records;
                    this.total = res.data.data.total;
                    this.tableData.forEach((item) => {
                        let arr = item.chargeStandards;
                        let costItemName = '/';
                        let costItemStandardName = '/';
                        if (arr.length) {
                            costItemName = arr
                                .map((item1) => item1.fullCostItemName)
                                .join(' / ');
                            costItemStandardName = arr
                                .map((item1) => item1.name)
                                .join(' / ');
                        }
                        item.costItemName = costItemName;
                        item.costItemStandardName = costItemStandardName;
                    });
                    //console.log(res.data.data.records);
                }
            });
        },
        handleCurrentChange(val) {
            //页码改变
            this.formSearch.current = val;
            this.getlist();
        },
        handleSizeChange(val) {
            this.formSearch.size = val;
            this.getlist();
        },
    },
    mounted() {
        this.getInit();
        // this.getlist();
    },
    components: {
        paging,
        bindTempDetail,
    },
};
</script>

<style scoped lang="scss">
.dialogForm /deep/ .input100 {
    width: 100px;
}
.radioStyle {
    margin: 20px 20px 0;
}
.btn {
    margin: 0 0 20px 24px;
    .queryResult {
        margin-right: 20px;
    }
}
</style>
